<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页设计</title>
<meta charset="utf-8">

<style>
  *{padding: 0;margin: 0;}


.column {
  float: left;
  width: 100%;
}
/* 头部样式 */
.header {
  background-color:grey;
  padding: 10px;
  text-align: center;
  color: white;
}

/* 导航条 */
.topnav {
  list-style-type: none;
  overflow: hidden;
  background-color: #333;
  margin:0;
	padding:0;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 25px;
}

/* 链接 - 修改颜色 */
.topnav a:hover:not(active) {
  background-color: #ddd;
  color: black;
  border-radius: 25px;
}
a
{
    display:block;
    width:100px;
}
/* 卡片 */
.card {
  background-color:red;
  padding: 20px;
  margin-top: 20px;
}
.column {
  width: 100%;
}
.dropdown {
  position: absolute;
  display: inline-block;
}

.dropdown-content {
    display: none;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 100;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 25px;
}
.dropdown-content a {
    color: black;
  
    width:100px;
    
    display:block;
}
.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

/* 底部 */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
</style>
</head>
<body>

<div class="header">
  <h1>
    狗狗之家</h1>
    <img src="https://uploadfile.huiyi8.com/2018/af/6c/66/35/412054.jpg" alt="狗狗大全" width="200" height="200">
</div>
 
<div class="topnav">
    <a  href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/runoob.html">首页</a>
    <a href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-1.html">狗狗大全</a>
   
    <div class="dropdown">
        <a class="active" href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-2.html">狗粮</a>
                <div class="dropdown-content">
            <a href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9.html">狗粮选择注意事项</a>
            <a href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/%E5%8D%81%E5%A4%A7%E7%8B%97%E7%B2%AE.html">十大狗粮</a>
          </div>
        </div>
        <a  href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-3.html">狗狗日常用品</a>
        <a  href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-3.html">狗狗日常用品</a>
        <a  href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/%E8%A1%A8%E5%8D%95.html" style="float:right">意见反馈</a>
  </div>
    <img src="https://pic1.zhimg.com/v2-5d6ec8f257e8bfbf1f831d82f8eb441d_1440w.jpg?source=172ae18b" alt="狗狗图" width="300" height="200">
    <img src="https://tse1-mm.cn.bing.net/th/id/R-C.eb4b3a74ca67dd16371cd06cf410200f?rik=OCzdRK458BGWig&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20190614%2f12%2f1560486748-UnLfsMOETq.jpg&ehk=d26rT4fJQGWnsXtutvedwqs4dUFlcWT2Ul5ZFfdsQiM%3d&risl=&pid=ImgRaw&r=0" alt="狗狗图" width="300" height="200">
    <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.pEW44QTtM7XJutBCgapK3wHaF-?w=193&h=180&c=7&r=0&o=5&dpr=1.65&pid=1.7" alt="狗狗图" width="300" height="200">
    <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.5lE1ecv7A_rA4RZrw5pK4gHaGO?w=217&h=183&c=7&r=0&o=5&dpr=1.65&pid=1.7" alt="狗狗图" width="280" height="200">
    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.YjhahrlPQtGvuH99-NOzEgHaHY?w=212&h=204&c=7&r=0&o=5&dpr=1.65&pid=1.7" alt="狗狗图" width="200" height="200">
  <div class="column">
    <div class="card"> 
    <p>随着养狗的人越来越多，国产狗粮也在养狗的需求下，逐渐的繁盛起来，同时不断的追求质量的提高。虽可能我们看了许多负面的消息，但我们也要树立信心，选择正确的狗粮产品，这些问题都可以得到一个很好的规避，选择正确的狗粮。</p>
  </div>
  </div>
  <div class="footer">
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.6oOKw7TgzTGKMz9lELv9xQHaHa?w=170&h=180&c=7&r=0&o=5&dpr=1.65&pid=1.7" alt="狗狗大全" width="50" height="50">
  </div>
</body>
</html>